<template>
  <div>
    <el-card class="app-container">
      <el-form label-position="right" label-width="80px" size="mini" ref="form" :rules="formRule" :model="formData">
        <div class="form__title">
          模板基础信息
        </div>
        <div class="form__content">
          <el-form-item required label="模板名称" prop="title">
            <el-input v-model="formData.title" placeholder="请输入模板名称" maxlength="50" show-word-limit/>
          </el-form-item>
        </div>
        <div class="form__title">
          包邮配送区域
        </div>
        <div class="form__content">
          <div class="area-wrap">
            <div class="area-check-all">
              <el-checkbox
                v-model="freeFeeAreaCheckAll"
                :disabled="freeFeeAreaCheckAllDisabled"
              >全选
              </el-checkbox>
            </div>
            <el-checkbox-group v-model="formData.freeFeeArea">
              <div v-for="area in areaList" class="flex area" :key="area.keys">
                <div class="area__key">{{ area.keys }}</div>
                <div class="area__cities">
                  <el-checkbox
                    :disabled="formData.notSendArea.includes(v.shortName) || feeAreaNames.includes(v.shortName)"
                    v-for="v in area.values"
                    :label="v.shortName"
                    :key="v.id">
                    {{ v.shortName }}
                  </el-checkbox>
                </div>
              </div>
            </el-checkbox-group>
          </div>
        </div>
        <div class="form__title">
          买家付邮费区域
        </div>
        <div class="form__content pb20">
          <div class="fee">
            <div v-if="formData.feeArea.length" class="fee__charge-type pb20 space-between--large flex">
              <div>
                计费方式
              </div>
              <el-radio-group v-model="formData.chargeType">
                <el-radio v-for="item in chargeTypeOptions" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
              </el-radio-group>
            </div>
            <div v-for="(item,itemIndex) in formData.feeArea" :key="item._key" class="fee__area">
              <div class="flex flex-between">
                <el-select v-model="item.feeArea" placeholder="请选择区域" size="mini">
                  <el-option label="全国" value="全国"/>
                  <el-option v-for="s in selectableFreeAreaList" :key="s" :value="s" :label="s"/>
                </el-select>
                <el-button type="text" @click="handleRemoveFeeArea(item.itemIndex)">删除</el-button>
              </div>
              <div class="border-t fee__detail">
                <div class="flex space-between--large">
                  <div>
                    <el-input
                      size="mini"
                      @keydown.native="SkuUtil.handleLimitInteger"
                      class="fee__input"
                      v-model="item.firstNum"/>
                    {{ formData.chargeType === ChargeTypeEnum.NUM.id ? '件' : '千克' }}内
                    <el-input
                      size="mini"
                      class="fee__input"
                      @keydown.native="SkuUtil.handleLimitFloat"
                      @blur="SkuUtil.handleLimitFloatPrecision"
                      v-model="item.firstFee"/>
                    元
                  </div>
                  <div>
                    每增加
                    <el-input
                      size="mini"
                      @keydown.native="SkuUtil.handleLimitInteger"
                      class="fee__input"
                      v-model="item.continueNum"/>
                    {{ formData.chargeType === ChargeTypeEnum.NUM.id ? '件' : '千克' }}，增加运费
                    <el-input
                      size="mini"
                      class="fee__input"
                      @keydown.native="SkuUtil.handleLimitFloat"
                      @blur="SkuUtil.handleLimitFloatPrecision"
                      v-model="item.continueFee"/>
                    元
                  </div>
                </div>
                <div class="pt20 flex">
                  <el-checkbox
                    size="mini"
                    v-model="item.condFreeFlag"
                    :true-label="1"
                    :false-label="0"
                    style="margin-right: 20px">指定条件包邮
                  </el-checkbox>
                  <div v-if="item.condFreeFlag" class="space-between">
                    满
                    <el-input
                      @keydown.native="SkuUtil.handleLimitInteger"
                      class="fee__input"
                      v-model="item.condFreeNum"
                      size="mini"/>
                    <el-select v-model="item.condFreeType" size="mini" class="fee__input">
                      <el-option v-for="i in freightCondFreeTypeOptions" :key="i.id" :value="i.id" :label="i.name"/>
                    </el-select>
                    包邮
                  </div>
                </div>
              </div>
              <div class="fee__error">{{ item.errMsg }}</div>
            </div>
          </div>
          <el-button size="mini" @click="handleAddFeeArea" icon="el-icon-plus">设置指定区域运费</el-button>
        </div>
        <div class="form__title">
          不配送区域
        </div>
        <div class="form__content">
          <div class="area-wrap">
            <div class="area-check-all">
              <el-checkbox
                v-model="notSendAreaCheckAll"
                :disabled="notSendAreaCheckAllDisabled">全选
              </el-checkbox>
            </div>
            <el-checkbox-group
              v-model="formData.notSendArea"
            >
              <div v-for="area in areaList" class="flex area" :key="area.keys">
                <div class="area__key">{{ area.keys }}</div>
                <div class="area__cities">
                  <el-checkbox
                    :disabled="formData.freeFeeArea.includes(v.shortName) || feeAreaNames.includes(v.shortName)"
                    v-for="v in area.values"
                    :label="v.shortName"
                    :key="v.id">{{ v.shortName }}
                  </el-checkbox>
                </div>
              </div>
            </el-checkbox-group>
          </div>
        </div>
      </el-form>

    </el-card>
    <div class="btn-area-holder"/>
    <div class="btn-area btn-area--fixed text-center">
      <el-button type="primary" size="small" :loading="isSubmitting" @click="handleSubmit">提交
      </el-button>
      <el-button type="default" size="small" @click="handleCancel">取消
      </el-button>
    </div>
  </div>
</template>

<script>
import {geoAreaApi} from "@/feature/geo/infra/GeoAreaApi";
import FreightFeeArea from "@/feature/pdt/domain/FreightFeeArea";
import ChargeTypeEnum from "@/feature/pdt/infra/constants/ChargeTypeEnum";
import SkuUtil from "@/framework/components/sku/SkuUtil";
import FreightCondFreeTypeEnum from "@/feature/pdt/infra/constants/FreightCondFreeTypeEnum";
import {freightTemplateApi} from "@/feature/pdt/infra/api/freightTemplateApi";

export default {
  data() {
    return {
      SkuUtil,
      isSubmitting: false,
      formData: {
        title: '',
        freeFeeArea: [],
        feeArea: [],
        chargeType: ChargeTypeEnum.NUM.id,
        notSendArea: []
      },
      ChargeTypeEnum,
      freightCondFreeTypeOptions: FreightCondFreeTypeEnum.getValues(),
      chargeTypeOptions: ChargeTypeEnum.getValues(),
      areaList: [],
      formRule: {
        title: [
          {
            required: true,
            message: '模板名称不能为空'
          }
        ]
      }
    }
  },
  computed: {
    notSendAreaCheckAll: {
      get() {
        // debugger
        return !this.getAllAreaShortNames().some(el => !this.formData.notSendArea.includes(el) && !this.formData.freeFeeArea.includes(el) && !this.feeAreaNames.includes(el)) && this.formData.notSendArea.length > 0
      },
      set(v) {
        if (v) {
          this.formData.notSendArea = this.allAreaShortNames.filter(el => !this.formData.freeFeeArea.includes(el) && !this.feeAreaNames.includes(el))
          return
        }
        this.formData.notSendArea = []
      }
    },
    freeFeeAreaCheckAll: {
      set(v) {
        if (v) {
          this.formData.freeFeeArea = this.allAreaShortNames.filter(el => !this.formData.notSendArea.includes(el) && !this.feeAreaNames.includes(el))
          return
        }
        this.formData.freeFeeArea = []
      },
      get() {
        return !this.getAllAreaShortNames().some(el => !this.formData.freeFeeArea.includes(el) && !this.formData.notSendArea.includes(el) && !this.feeAreaNames.includes(el)) && this.formData.freeFeeArea.length > 0
      }
    },
    feeAreaNames() {
      return this.formData.feeArea.map(el => el.feeArea)
    },
    allAreaShortNames() {
      return this.areaList.reduce((r, a) => {
        r.push(...a.values.map(el => el.shortName))
        return r
      }, [])
    },
    selectableFreeAreaList() {
      return this.allAreaShortNames.filter(el => !this.formData.notSendArea.includes(el) && !this.formData.freeFeeArea.includes(el))
    },
    freeFeeAreaCheckAllDisabled() {
      return !this.getAllAreaShortNames().some(el => !this.formData.notSendArea.includes(el) && !this.feeAreaNames.includes(el))
    },
    notSendAreaCheckAllDisabled() {
      return !this.getAllAreaShortNames().some(el => !this.formData.freeFeeArea.includes(el) && !this.feeAreaNames.includes(el))
    }
  },
  created() {
    this.loadAreaList()
  },
  methods: {
    handleCancel() {
      this.$router.replace('index')
    },
    handleSubmit() {
      this.$refs.form.validate(r => {
        try {
          this.formData.feeArea.forEach(el => el.validate())
        } catch (ex) {
          return
        }
        if (r) {
          this.isSubmitting = true
          freightTemplateApi.create(this.formData).then(() => {
            this.$router.replace('index')
          }).finally(() => {
            this.isSubmitting = false
          })
        }
      })
    },
    handleAddFeeArea() {
      this.formData.feeArea.push(new FreightFeeArea())
    },
    handleRemoveFeeArea(idx) {
      this.formData.feeArea.splice(idx, 1)
    },
    getAllAreaShortNames() {
      return this.areaList.reduce((r, a) => {
        r.push(...a.values.map(el => el.shortName))
        return r
      }, [])
    },
    loadAreaList() {
      geoAreaApi.letterGroupedList({pid: 0}).then(data => {
        this.areaList = data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.area-wrap {
  padding: 10px 0 20px 0;
}

.area-check-all {
  padding-left: 30px;
  padding-bottom: 10px;
}

.area {
  padding: 10px 0;

  &__key {
    font-size: 12px;
    width: 80px;
    text-align: right;
    padding-right: 10px;
  }

  &__cities {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(9, 1fr);
  }
}

.fee {
  &__area {
    background: #fff;
    margin-bottom: 20px;
    padding: 20px;

  }

  &__error {
    color: red;
  }

  &__input {
    width: 80px;
  }

  &__detail {
    line-height: 2;
    padding: 20px 0 10px 0;
    margin-top: 10px;
  }
}

@import "@/styles/form.scss";
</style>
